<template>
    <div class="warp">

        <!-- 五大类 饼图 -->
        <div class="type-box">
            <div class="type-list" v-for="(item,i) in details" :key="i">
                <h6>{{item.name}}（总计{{item.firstApproveNum}}人）</h6>
                <div class="type-cont" :class="item.class">
                    <div>
                        <div class="type-num" v-for="(v,n) in item.childList"
                             :key="n"
                             @click="toStaffTitles(item.name,v.name)">
                            <p v-for="(data,l) in v.childList" :key="l">
                                <span  v-if="l<3">{{data.firstApproveNum}}</span>
                            </p>
                        </div>
                    </div>
                    <div class="type-name-list">
                        <div v-for="(v,j) in item.childList"
                             :key="j"
                             @click="toStaffTitles(item.name,v.name)">

                            <p v-if="v.name.length>10" class="margin-left">{{v.name}}({{v.firstApproveNum}}人)</p>
                            <p v-else>{{v.name}}({{v.firstApproveNum}}人)</p>
                        </div>
                    </div>
                </div>
                <div class="type-title">
                    <div>
                        <span></span>
                        <p>正高</p>
                    </div>
                    <div>
                        <span></span>
                        <p>副高</p>
                    </div>
                    <div>
                        <span></span>
                        <p>中职</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- 五大类占比 -->
        <div class="mrc2">

            <!-- 占比折线图 -->
            <div class="assessor-box">
                <div class="assessor-title">
                    <h6>五大类人员占比统计（总计{{categoryNum}}人）</h6>
                </div>
                <div class="category-proportion">
                    <p>0</p>
                    <p>20%</p>
                    <p>40%</p>
                    <p>60%</p>
                    <p>80%</p>
                    <p>100%</p>
                </div>
                <div id="echarts-assessor" class="chart"></div>
            </div>
            
            <!-- 占比进度图 -->
            <div class="assessor-box">
                <div class="assessor-title">
                    <h6>五大类人员职称占比统计（总计{{JobTitleNum}}人）</h6>
                </div>
                <div id="echarts-assessor2" class="chart">
                    <div class="assessor-list" v-for="(item,i) in JobTitleName" :key="i">
                        <div class="assessor-list-title">
                            <p>{{item.scale}}<i>%</i></p>
                            <span><label >{{item.name}}</label>（{{item.num}}）</span>
                        </div>
                        <div class="assessor-list-bg">
                            <p :style="{background: item.color,width: item.scale+'%'}"></p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 拟参评人员占比 图表 -->
            <div class="assessor-box">
                <div class="assessor-title">
                    <h6>人员统计</h6>
                </div>
                <div id="recordsRateChart" class="chart">
                </div>
            </div>
            
        </div>

        <!-- 7小类人员占比柱状图 -->
        <div class="mrc3">
            <div class="assessor-title">
                <h6>17小类人员占比（总计{{ChildCategoryNum}}人）</h6>
            </div>
            <div class="category-proportion">
                <p>0</p>
                <p>20%</p>
                <p>40%</p>
                <p>60%</p>
                <p>80%</p>
                <p>100%</p>
            </div>
            <div id="echarts-assessor3">
                <div class="assessor-cont">
                    <div v-for="(item,i) in ChildCategoryName"
                         :style="{background: item.color,height: item.scale,boxShadow: '0px -4px 0px 4px '+shadowColor[i]}" :key="i">
                        <p>{{item.scale}}</p>
                        <span>
                            {{item.name}}<br/>
                            {{item.num}}
                        </span>
                    </div>
                </div>
            </div>
        </div>

    </div>
</template>

<script>
    import {findListDetails, findListCategory, findListJobTitle, findListChildCategory,findListRecordsRate} from '@/service/api'

    export default {
        name: "Overview",
        data() {
            return {
                details: [], // 五大类详细数据
                colorList: ['#F5AFAD', '#F79A00', '#84D7D3', '#AEC785', '#A48AD4'], //柱状图颜色
                colorList2: ['#FDD752', '#3399FF', '#4AD2FF'],
                colorList3: ['#38C1CF', '#EBCE4C', '#1A43A9', '#62CF73', '#6060F5', '#5D7CDF', '#38C1CF', '#4BB2FA',
                    '#1A43A9', '#6D59A6', '#6080F5', '#5D7CDF', '#7A4FE7', '#38C1CF', '#6E6BFF', '#2B57C2', '#6241C0'],
                shadowColor:['rgba(56,193,207,0.3)','rgba(235,206,76,0.3)','rgba(26,67,169,0.3)', 'rgba(98,207,115,0.3)',
                            'rgba(96,96,245,0.3)','rgba(93,124,223,0.3)', 'rgba(56,193,207,0.3)','rgba(75,178,250,0.3)',
                            'rgba(26,67,169,0.3)', 'rgba(109,89,166,0.3)','rgba(96,128,245,0.3)','rgba(93,124,223,0.3)',
                            'rgba(122,79,231,0.3)','rgba(56,193,207,0.3)','rgba(110,107,255,0.3)','rgba(43,87,194,0.3)',
                            'rgba(98,65,192,0.3)'
                ],

                categoryScale: [], // 柱状图数据
                JobTitleScale: [],
                ChildCategoryScale: [],

                categoryData: [], // 柱状图数据
                JobTitleData: [],
                ChildCategoryData: [],

                categoryNum: 0,    // 柱状图总计
                JobTitleNum: 0,
                ChildCategoryNum: 0,

                categoryName: [],  // 柱状图
                JobTitleName: [],
                ChildCategoryName: [],
            }
        },
        created() {
            this.getFindListDetails();
            this.getFindListCategory();
            
            this.getFindListJobTitle();

             // 拟参评人员占比
            this.findRecordsRate();

            this.getFindListChildCategory();
        },
        methods: {
            // 1.0> 顶部饼图 - 五大类详情数据
            getFindListDetails() {
                findListDetails().then(res => {
                    if (res.code == 200) {
                        res.data.forEach((v) => {
                            if (v.childList.length == 1) {
                                v.class = 'type-cont1'
                            } else if (v.childList.length == 4) {
                                v.class = 'type-cont4'
                            } else if (v.childList.length == 5) {
                                v.class = 'type-cont5'
                            }
                        });
                        this.details = res.data;
                    }
                });
            },
            // 1.1> 顶部饼图 - 跳转
            toStaffTitles(category, subCategory) {
                this.$router.push({name: 'staffTitles', params: {"category": category, 'subCategory': subCategory}});
            },

            // 2.0> 折线图 - 五大类人员占比统计数据
            getFindListCategory() {
                findListCategory().then(res => {
                    if (res.code == 200) {
                        res.data.forEach((v) => {
                            this.categoryNum += Number(v.firstApproveNum);
                            this.categoryName.push(v.name + '\n' + v.firstApproveNum + '人')
                            this.categoryData.push(v.firstApproveNum)
                        });
                        this.categoryName.forEach((v, i) => {
                            let percentage = this.categoryData[i] / this.categoryNum * 100;
                            this.categoryScale.push(parseInt(percentage))
                        });
                        this.handleEchartsLine(this.categoryScale,this.categoryName, this.categoryData)
                    }
                });
            },
            // 2.1> 折线图 - 图表
            handleEchartsLine(categoryScale,xAxisData, seriesData) { 
                const myCharts = this.$echarts.init(document.getElementById('echarts-assessor'));
                let markArr = [], temObj = null;
                categoryScale.forEach(function(v, i) {
                    temObj = {
                        value: v+'%',
                        xAxis: i,
                        yAxis: seriesData[i],
                        itemStyle: {
                            color: '#31478F'
                        }
                    }
                    markArr.push(temObj)
                });
                let option = {
                    tooltip: {
                        trigger: 'axis',
                        formatter: '{b}'
                    },
                    xAxis: {
                        type: 'category',
                        // boundaryGap: false,
                        data: xAxisData,
                        axisLine: {
                            lineStyle: {
                                color: "#EDEDED",
                                width: 1
                            }
                        },
                        axisLabel: {
                            textStyle: {
                                color: '#999',
                                lineHeight: 16,
                                textAlign: 'center',
                                fontSize: 11 // 让字体变小
                            },
                        },
                        axisTick: {
                            show: false
                        }
                    },
                    yAxis: {
                        type: 'value',
                        // boundaryGap: ['0%', '100%'],
                        // show:false,
                        axisLabel: {
                            formatter: '', //{value}
                            color: '#999',
                            fontSize: '11'
                        },
                        axisTick: {
                            show: false
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#EDEDED'
                            }
                        },
                        splitLine: {
                            lineStyle: {
                                color: '#fff'
                            }
                        }
                    },
                    series: [
                        {
                            type: 'line',
                            data: seriesData,
                            // data: [0, 4, 2, 5, 10],
                            lineStyle: {
                                normal: {
                                    color: '#31478F',
                                    width: 3
                                }
                            },
                            itemStyle: {
                                color: '#31478F',
                                borderWidth: 8,
                            },
                            markPoint: {
                                symbol:'image://http://cbb.chabaobao.net/statics/cbb/parking-h5/assets/img/echart-title-bg.png',
                                symbolSize:[30,20],
                                symbolOffset:[0, -16],
                                itemStyle: {
                                    color: '#00CD68',
                                },
                                label:{
                                    fontSize:11,
                                    offset:[0,-2]
                                },
                                data: markArr
                            },
                        }
                    ],
                    grid: {
                        top: '13%',
                        left: '10%',
                        right: '5%',
                        bottom: '0%',
                        containLabel: true
                    },
                };
                myCharts.setOption(option);
                window.onresize = myCharts.resize;
            },

            // 3.0> 进度图 - 五大类人员职称占比统计数据
            getFindListJobTitle() {
                findListJobTitle().then(res => {
                    if (res.code == 200) {
                        res.data.forEach((v, i) => {
                            this.JobTitleNum += Number(v.firstApproveNum);
                            this.JobTitleName.push({
                                name: v.name,
                                num: v.firstApproveNum + '人',
                                color: this.colorList2[i]
                            })
                            this.JobTitleData.push(v.firstApproveNum)
                        });
                        this.JobTitleName.forEach((v, i) => {
                            let percentage = this.JobTitleData[i] / this.JobTitleNum * 100;
                            this.JobTitleName[i].scale = parseInt(percentage)
                        });

                    } else {
                        console.log(res)
                    }
                });
            },

            // 4.0> 拟参评人员占比 - 数据
            findRecordsRate(){
                findListRecordsRate().then(res => {
                    if (res.code == 200) {
                        var xLabel = new Array();
                        var valueList = new Array();
                        // this.totalPeople = 0;
                        for(var i=0;i<res.data.length;i++){
                            xLabel.push(res.data[i].name);
                            valueList.push(res.data[i].count);
                            // this.totalPeople+=res.data.data[i].count;
                        }
                        this.findRecordsRateChart(xLabel,valueList);
                    }

                });
            },
            // 4.1> 拟参评人员占比 - 图表
            findRecordsRateChart(xLabel,valueList){
                var myCharts = this.$echarts.init(document.getElementById('recordsRateChart'));
                var option = {
                    tooltip:{
                        formatter:"{b}：{c}人"
                    },
                    // 坐标区域
                    grid:{
                        top:'10%',
                        left:'80px',  // 图表与容器距离
                        right:'52px',
                        bottom:'10%',
                    },
                    xAxis: {
                        type: 'category',
                        data: xLabel,
                        axisLabel: {  // Y轴刻度标签样式
                            show: true,  
                            interval: 'auto',       // 标签间隔，可设为0为强制显示所有标签
                            color:'#999',        // 标签颜色
                        },
                        axisLine: {   // Y轴字体、线颜色
                            lineStyle: {
                                color: '#efefef'
                            }
                        }, 
                    },
                    yAxis: {
                        // max:100,
                        // min:0,
                        type: 'value',
                        axisLabel: {  // Y轴刻度标签样式
                            show: true,  
                            margin:20,
                            formatter: '{value}人',  // 标签格式
                            interval: 'auto',       // 标签间隔，可设为0为强制显示所有标签
                            color:'#999',        // 标签颜色
                        },
                        axisLine: {   // Y轴字体、线颜色
                            lineStyle: {
                                color: '#efefef'
                            }
                        }, 
                        splitLine:{  // y轴网格区域分隔线样式
                            show:true,
                            lineStyle:{ // 样式
                                color:'#efefef',
                            }
                        }
                    },
                    series: [{
                        // name: '占比',
                        data:valueList,
                        itemStyle:{     // 柱子样式
                                
                            // color:"#c23531",   // 每个柱子颜色
                            color:function(params){ 
                                var colorList = ['#38C1CF','#496BC3', '#596BA6', '#3896A1', '#5454B2'];
                                return colorList[params.dataIndex];
                            },
                        },
                        barWidth:'26%',
                        type: 'bar',
                        label: {
                            normal: {
                                show: true,
                                position: 'top',
                                formatter: '{c}人',  // 标签格式
                            }
                        },
                    }]
                };
                // 使用刚指定的配置项和数据显示图表。
                myCharts.setOption(option);
            },

            // 5.0> 17小类人员占比统计
            getFindListChildCategory() {
                findListChildCategory().then(res => {
                    if (res.code == 200) {
                        res.data.forEach((v, i) => {
                            this.ChildCategoryNum += Number(v.firstApproveNum);
                            this.ChildCategoryName.push({
                                name: v.name,
                                num: v.firstApproveNum + '人',
                                color: this.colorList3[i]
                            })
                            this.ChildCategoryData.push(v.firstApproveNum)
                        });
                        this.ChildCategoryName.forEach((v, i) => {
                            let percentage = this.ChildCategoryData[i] / this.ChildCategoryNum * 100;
                            this.ChildCategoryName[i].scale = parseInt(percentage) + '%'
                        });
                    }

                });
            },
           
        },
        mounted() {
            // this.handleEchartsLine()
            // this.eChartTotalProportion('total-proportion');
            // this.eChartTotalProportion('success-proportion');
        }
    }
</script>

<style scoped>
    .warp {
        height: 100%;
        background: #F4F1F4;
        /*overflow-x: hidden;*/
    }

    .type-box {
        display: flex;
        overflow-x: hidden;
        justify-content: space-between;
    }

    .type-list {
        width: 18.8%;
        min-width: 200px;
        margin-right: 18px;
        min-height: 213px;
        background: rgba(255, 255, 255, 1);
        box-shadow: 0px 9px 18px 2px rgba(43, 103, 254, 0.05);
        border-radius: 5px;
    }

    .type-list:last-child {
        margin-right: 0;
    }

    .type-list h6 {
        text-align: center;
        font-size: 16px;
        color: #333;
        margin-top: 10px;
    }

    .type-cont {
        width: calc(229px * 0.7);
        height: calc(197px * 0.7);;
        background: url("../../assets/Overview/3.png") no-repeat;
        background-size: 100% 100%;
        margin: 20px auto 0px;
        position: relative;
    }

    .type-num {
        position: absolute;
        font-size: 12px;
        color: #333;
        cursor: pointer;
    }

    .type-num p span{
        font-weight: bold;
    }

    .type-num:nth-of-type(1) {
        left: 50%;
        top: 2px;
        line-height: 22px;
        display: flex;
        flex-direction: column-reverse;
    }

    .type-num:nth-of-type(2) {
        left: 45%;
        top: 64px;
        line-height: 22px;
        position: relative;
    }

    .type-num:nth-of-type(2) > p {
        position: absolute;
    }

    .type-num:nth-of-type(2) > p:nth-of-type(2) {
        left: -18px;
        top: 10px;
    }

    .type-num:nth-of-type(2) > p:nth-of-type(3) {
        left: -38px;
        top: 20px;
    }

    .type-num:nth-of-type(3) {
        left: 54%;
        top: 64px;
        line-height: 22px;
    }

    .type-num:nth-of-type(3) > p {
        position: absolute;
    }

    .type-num:nth-of-type(3) > p:nth-of-type(2) {
        left: 19px;
        top: 10px;
    }

    .type-num:nth-of-type(3) > p:nth-of-type(3) {
        left: 38px;
        top: 20px;
    }

    .type-name-list div {
        color: #999999;
        font-size: 11px;
        width: 54px;
        position: absolute;
        text-align: center;
        cursor: pointer;
    }

    .type-name-list div:nth-of-type(1) {
        width: 120px;
        top: -18px;
        right: -40px;
    }

    .type-name-list div:nth-of-type(2) {
        top: 90px;
        left: -32px;
    }

    .type-name-list div:nth-of-type(3) {
        bottom: 16px;
        right: -34px;
    }

    .type-title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 2px 14px 0px;
    }

    .type-title > div {
        display: flex;
        align-items: center;
    }

    .type-title > div span {
        display: inline-block;
        width: 13px;
        height: 7px;
        background: rgba(253, 215, 82, 1);
        border-radius: 3px;
        margin-right: 6px;
    }

    .type-title > div:nth-of-type(2) span {
        background: #3399FF;
    }

    .type-title > div:nth-of-type(3) span {
        background: #4AD2FF;
    }

    .type-title > div p {
        font-size: 11px;
        color: #999999;
    }

    .type-cont4 {
        background: url("../../assets/Overview/4.png") no-repeat;
        background-size: 100% 100%;
    }

    .type-cont4 .type-num:nth-of-type(1) p {
        position: absolute;
        left: -6px;
        top: 47px;
    }

    .type-cont4 .type-num:nth-of-type(1) p:nth-of-type(2) {
        left: -22px;
        top: 36px;
    }

    .type-cont4 .type-num:nth-of-type(1) p:nth-of-type(3) {
        left: -43px;
        top: 23px;
    }

    .type-cont4 .type-num:nth-of-type(2) {
        top: 68px;
    }

    .type-cont4 .type-num:nth-of-type(3) {
        top: 68px;
    }

    .type-cont4 .type-num:nth-of-type(4),
    .type-cont5 .type-num:nth-of-type(5) {
        left: 53%;
        top: 4px;
        line-height: 22px;
        display: flex;
        flex-direction: column-reverse;
    }

    .type-cont4 .type-num:nth-of-type(4) p {
        position: absolute;
        left: 2px;
        top: 45px;
    }

    .type-cont4 .type-num:nth-of-type(4) p:nth-of-type(2) {
        left: 22px;
        top: 36px;
    }

    .type-cont4 .type-num:nth-of-type(4) p:nth-of-type(3) {
        left: 40px;
        top: 24px;
    }

    .type-cont4 .type-name-list div:nth-of-type(1) {
        width: 110px;
        top: -18px;
        left: -40px;
    }

    .type-cont4 .type-name-list div:nth-of-type(3) {
        bottom: 0px;
    }

    .type-cont4 .type-name-list div:nth-of-type(4) {
        width: 120px;
        top: -18px;
        right: -40px;
    }


    .type-cont5 {
        background: url("../../assets/Overview/5.png") no-repeat;
        background-size: 100% 100%;
    }

    .type-cont5 .type-num:nth-of-type(1) {
        left: 47%;
    }

    .type-cont5 .type-num:nth-of-type(2) {
        left: 39%;
        top: 52px;
    }

    .type-cont5 .type-num:nth-of-type(3) {
        left: 39%;
        top: 68px;
    }

    .type-cont5 .type-num:nth-of-type(4) {
        left: 52%;
        top: 71px;
    }

    .type-cont5 .type-num:nth-of-type(5) {
        left: 55%;
        top: 8px;
    }

    .type-cont5 .type-num:nth-of-type(2) p:nth-of-type(2) {
        left: -20px;
        top: -4px;
    }

    .type-cont5 .type-num:nth-of-type(2) p:nth-of-type(3) {
        left: -42px;
        top: -14px;
    }

    .type-cont5 .type-num:nth-of-type(3) p:nth-of-type(2) {
        left: -12px;
        top: 15px;
    }

    .type-cont5 .type-num:nth-of-type(3) p:nth-of-type(3) {
        left: -28px;
        top: 30px;
    }

    .type-cont5 .type-num:nth-of-type(4) p:nth-of-type(2) {
        position: absolute;
        left: 14px;
        top: 14px;
    }

    .type-cont5 .type-num:nth-of-type(4) p:nth-of-type(3) {
        position: absolute;
        left: 30px;
        top: 30px;
    }

    .type-cont5 .type-num:nth-of-type(5) p:nth-of-type(1) {
        position: absolute;
        left: 0px;
        top: 45px;
    }

    .type-cont5 .type-num:nth-of-type(5) p:nth-of-type(2) {
        position: absolute;
        left: 20px;
        top: 40px;
    }

    .type-cont5 .type-num:nth-of-type(5) p:nth-of-type(3) {
        position: absolute;
        left: 40px;
        top: 34px;
    }

    .type-cont5 .type-name-list div:nth-of-type(2) {
        top: 50px;
        left: -36px;
    }

    .type-cont5 .type-name-list div:nth-of-type(3) {
        bottom: 10px;
        left: -32px;
    }

    .type-cont5 .type-name-list div:nth-of-type(4) {
        bottom: 10px;
        right: -34px;
    }

    .type-cont5 .type-name-list div:nth-of-type(5) {
        top: 50px;
        right: -38px;
    }

    .type-cont1 {
        width: calc(203px * 0.7);
        height: calc(190px * 0.7);
        background: url("../../assets/Overview/1.png") no-repeat;
        background-size: 100% 100%;
    }

    .type-cont1 .type-num {
        top: 12px;
        left: 45%;
    }

    .type-cont1 .type-num p {
        position: absolute;
        right: -6px;
        top: 45px;
    }

    .type-cont1 .type-num p:nth-of-type(2) {
        right: -38px;
    }

    .type-cont1 .type-num p:nth-of-type(3) {
        right: -60px;
    }

    .type-cont1 .type-name-list div {
        top: 90px;
        width: 50px;
    }


    .mrc2 {
        width: 100%;
        overflow: hidden;
        display: flex;
        /* justify-content: space-between; */
        margin-top: 18px;
    }

    .mrc2>.assessor-box {
        width: 33%;
        /* min-width: 528px; */
        height: 268px;
        background: #fff;
        border-radius: 5px;
        position: relative;
        /*box-shadow: 0px 9px 18px 2px rgba(43, 103, 254, 0.1);*/
    }
    .mrc2>.assessor-box:nth-of-type(2){
        margin:0px 18px;
        position: relative;
    }

    .mrc2>.assessor-box>.chart{
        width: 100%;
        height: 205px;
        position: relative;
        margin: 50px auto 0;
    }
    .mrc2>.assessor-box>.chart:nth-of-type(2){
        height: 190px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .mrc2>.assessor-box>.chart:nth-of-type(3){
        height: 190px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }



    #echarts-assessor3 {
        width: 95%;
        height: 165px;
        position: relative;
        margin: 60px auto 0;
        background: url("../../assets/Overview/17xiaolei.png") no-repeat;
        background-size: 100% 100%;
        background-position: 20px -5px;
    }

    #echarts-assessor3 .assessor-cont {
        width: 92%;
        height: 150px;
    }

    #echarts-assessor3 .assessor-cont {
        width: 96%;
    }

    #echarts-assessor3 .assessor-cont > div {
        margin-left: 25px;
    }

    .assessor-title {
        position: absolute;
        width: 100%;
        top: 10px;
    }

    .assessor-title h6,
    .total-proportion-box h6 {
        text-align: center;
        font-size: 16px;
        color: #333;
    }

    .assessor-title p {
        position: absolute;
        right: 10px;
        top: 4px;
        font-size: 12px;
        color: rgba(153, 153, 153, 1);
    }

    .handle-margin {
        margin-top: 18px;
    }

    .total-proportion-box,
    .total-proportion-box h6 {
        margin-top: 14px;
    }

    #total-proportion,
    #success-proportion {
        height: 240px;
    }

    .total-proportion-type {
        margin: -14px 35px 0;
        display: flex;
        flex-wrap: wrap;
    }

    .total-proportion-type > div {
        width: 50%;
        text-align: center;
        margin-bottom: 2px;
    }

    .total-proportion-type > div:nth-of-type(4) {
        width: 42%;
    }

    .total-proportion-type > div span {
        display: inline-block;
        width: 12px;
        height: 6px;
        background: rgba(245, 175, 173, 1);
        border-radius: 3px;
    }

    .total-proportion-type > div p {
        display: inline-block;
        font-size: 13px;
        color: #333;
        margin-left: 6px;
    }

    .mrc3 {
        height: 300px;
        background: #fff;
        border-radius: 5px;
        position: relative;
        margin-top: 18px;
        box-shadow: 0px 9px 18px 2px rgba(43, 103, 254, 0.1);
        margin-bottom: 18px;
        overflow: hidden;
    }

    .category-proportion{
        position: absolute;
        left: 16px;
        height: 205px;
        display: flex;
        flex-direction: column-reverse;
        text-align: right;
        color: #999;
        font-size: 10px;
        top: 33px;
    }
    .category-proportion p{
        margin-bottom: 14px;
    }
   
    .assessor-list{
        width: 82%;
        margin: 0 auto;
    }
    .assessor-list-title{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .assessor-list-title p{
        font-size: 24px;
        color: #333;
        font-weight: bold;
    }
    .assessor-list-title p i{
        font-size: 14px;
    }
    .assessor-list-title span{
        display: block;
        font-size: 13px;
    }
    .assessor-list-bg{
        height: 12px;
        background: #DDDDDD;
        border-radius:6px;
        position: relative;
    }
    .assessor-list-bg p{
        position: absolute;
        height: 12px;
        border-radius:6px;
        width: 60%;
        background: #3E99F9;
        transition: all 1s;
    }

    #echarts-assessor .assessor-cont,
    #echarts-assessor2 .assessor-cont {
        height: 145px;
    }

    #echarts-assessor .assessor-cont > div,
    #echarts-assessor2 .assessor-cont > div {
        margin-bottom: -26px;
    }

    .assessor-cont {
        width: 78%;
        height: 172px;
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        margin: 0 auto;
    }

    .assessor-cont > div {
        width: 26px;
        height: calc(100% - 26px);
        background: #9D77FC;
        position: relative;
        top: 10px;
    }

    .assessor-cont > div p {
        position: absolute;
        top: -26px;
        width: 30px;
        height: 20px;
        line-height: 18px;
        background: url("../../assets/home/echart-title-bg.png") no-repeat;
        background-size: 100% 100%;
        text-align: center;
        color: #fff;
        font-size: 11px;
    }

    .assessor-cont > div span {
        display: block;
        position: absolute;
        top: 100%;
        /* width: 70px; */
        width: 260%;
        left: -22px;
        text-align: center;
        font-size: 11px;
        color: #999;
    }

    .margin-left {
        width: 55px;
        margin-left: 10px;
    }

</style>
